<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>词典管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/element.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .dict-title {
            margin: 50px auto;
            height: 30px;
            width: 100px;
        }
        
        .dict-title span {
            text-align: center;
            line-height: 30px;
            font-size: 20px;
        }
        
        .el-form {
            margin-left: 50px;
        }
        
        .dict-tool-btn {
            padding-left: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="app-container">
            <div class="dict-title"><span>字典管理</span></div>
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                <el-form-item label="字典名称" prop="dictType">
                    <el-select v-model="queryParams.dictType" size="small">
                        <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
                    </el-select>
                </el-form-item>
                <el-form-item label="字典标签" prop="dictLabel">
                    <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable size="small" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">
                        <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>

            </el-form>

            <el-row :gutter="10" class="dict-tool-btn">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="success" icon="el-icon-edit">修改</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete">删除</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" icon="el-icon-download">导出</el-button>
                </el-col>

            </el-row>





        </div>
    </div>

</body>

<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 字典表格数据
            dataList: [],
            // 默认字典类型
            defaultDictType: "",
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 状态数据字典
            statusOptions: [],
            // 类型数据字典
            typeOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                dictName: undefined,
                dictType: undefined,
                status: undefined
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                dictLabel: [{
                    required: true,
                    message: "数据标签不能为空",
                    trigger: "blur"
                }],
                dictValue: [{
                    required: true,
                    message: "数据键值不能为空",
                    trigger: "blur"
                }],
                dictSort: [{
                    required: true,
                    message: "数据顺序不能为空",
                    trigger: "blur"
                }]
            },
            created() {
                const dictId = this.$route.params && this.$route.params.dictId;
                this.getType(dictId);
                this.getTypeList();
                this.getDicts("sys_normal_disable").then(response => {
                    this.statusOptions = response.data;
                });
            },
            methods: {
                /** 查询字典类型详细 */
                getType(dictId) {
                    getType(dictId).then(response => {
                        this.queryParams.dictType = response.data.dictType;
                        this.defaultDictType = response.data.dictType;
                        this.getList();
                    });
                },
                /** 查询字典类型列表 */
                getTypeList() {
                    listType().then(response => {
                        this.typeOptions = response.rows;
                    });
                },
                /** 查询字典数据列表 */
                getList() {
                    this.loading = true;
                    listData(this.queryParams).then(response => {
                        this.dataList = response.rows;
                        this.total = response.total;
                        this.loading = false;
                    });
                },
                // 数据状态字典翻译
                statusFormat(row, column) {
                    return this.selectDictLabel(this.statusOptions, row.status);
                },
                // 取消按钮
                cancel() {
                    this.open = false;
                    this.reset();
                },
                // 表单重置
                reset() {
                    this.form = {
                        dictCode: undefined,
                        dictLabel: undefined,
                        dictValue: undefined,
                        dictSort: 0,
                        status: "0",
                        remark: undefined
                    };
                    this.resetForm("form");
                },
                /** 搜索按钮操作 */
                handleQuery() {
                    this.queryParams.pageNum = 1;
                    this.getList();
                },
                /** 重置按钮操作 */
                resetQuery() {
                    this.resetForm("queryForm");
                    this.queryParams.dictType = this.defaultDictType;
                    this.handleQuery();
                },
                /** 新增按钮操作 */
                handleAdd() {
                    this.reset();
                    this.open = true;
                    this.title = "添加字典数据";
                    this.form.dictType = this.queryParams.dictType;
                },
                // 多选框选中数据
                handleSelectionChange(selection) {
                    this.ids = selection.map(item => item.dictCode)
                    this.single = selection.length != 1
                    this.multiple = !selection.length
                },
                /** 修改按钮操作 */
                handleUpdate(row) {
                    this.reset();
                    const dictCode = row.dictCode || this.ids
                    getData(dictCode).then(response => {
                        this.form = response.data;
                        this.open = true;
                        this.title = "修改字典数据";
                    });
                },
                /** 提交按钮 */
                submitForm: function() {
                    this.$refs["form"].validate(valid => {
                        if (valid) {
                            if (this.form.dictCode != undefined) {
                                updateData(this.form).then(response => {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                });
                            } else {
                                addData(this.form).then(response => {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                });
                            }
                        }
                    });
                },
                /** 删除按钮操作 */
                handleDelete(row) {
                    const dictCodes = row.dictCode || this.ids;
                    this.$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(function() {
                        return delData(dictCodes);
                    }).then(() => {
                        this.getList();
                        this.msgSuccess("删除成功");
                    }).catch(() => {});
                },
                /** 导出按钮操作 */
                handleExport() {
                    const queryParams = this.queryParams;
                    this.$confirm('是否确认导出所有数据项?', "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        this.exportLoading = true;
                        return exportData(queryParams);
                    }).then(response => {
                        this.download(response.msg);
                        this.exportLoading = false;
                    }).catch(() => {});

                }
            }
        }
    });
</script>

</html>